<!--评估详情-->
<template>
	<div class="eud">
		<header id="header" class="mui-bar mui-bar-nav">
			<i style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-on:click="back"></i>
			<h1 class="mui-title" style="color: #fff;">分项功能</h1>
		</header>
		<div class="plLeft">
			<ul>
				<li class="active">
					<a>
						<span class="title">品牌实力</span>
						<div class="mui-media-body star light">
							<img v-for="item in starNum1" :src=item alt="" />
						</div>
						<div class="mui-media-body star lightEnd">
							<img v-for="item in starNum0" :src=item alt="" />
						</div>
						<p class="score"><span>{{xingJiaBiCore[0]}}</span>分</p>
					</a>
				</li>
				<li>
					<a>
						<span class="title">社区规划</span>
						<div class="mui-media-body star">
							<img v-for="item in starNum2" :src=item alt="" />
						</div>
						<div class="mui-media-body star lightEnd">
							<img v-for="item in starNum0" :src=item alt="" />
						</div>
						<p class="score"><span>{{xingJiaBiCore[1]}}</span>分</p>
					</a>
				</li>
				<li>
					<a>
						<span class="title">社区配套</span>
						<div class="mui-media-body star">
							<img v-for="item in starNum3" :src=item alt="" />
						</div>
						<div class="mui-media-body star lightEnd">
							<img v-for="item in starNum0" :src=item alt="" />
						</div>
						<p class="score"><span>{{xingJiaBiCore[2]}}</span>分</p>
					</a>
				</li>
				<li>
					<a>
						<span class="title">物业服务</span>
						<div class="mui-media-body star">
							<img v-for="item in starNum4" :src=item alt="" />
						</div>
						<div class="mui-media-body star lightEnd">
							<img v-for="item in starNum0" :src=item alt="" />
						</div>
						<p class="score"><span>{{xingJiaBiCore[3]}}</span>分</p>
					</a>
				</li>
				<li>
					<a>
						<span class="title">地段配套</span>
						<div class="mui-media-body star">
							<img v-for="item in starNum5" :src=item alt="" />
						</div>
						<div class="mui-media-body star lightEnd">
							<img v-for="item in starNum0" :src=item alt="" />
						</div>
						<p class="score"><span>{{xingJiaBiCore[4]}}</span>分</p>
					</a>
				</li>
			</ul>
		</div>
		<div class="conRight" v-if="flagShow">
			<!--<xjb></xjb>-->
			<pingpai :pinPaiShiLi="pinPaiShiLi"  class='show'></pingpai>
			<jingguan :sheQuJingGuan="sheQuJingGuan"></jingguan>
			<peitao :sheQuPeiTao="sheQuPeiTao"></peitao>
			<fuwu :wuYeFuWu="wuYeFuWu"></fuwu>
			<diduan :diDuanPeiTao="diDuanPeiTao"></diduan> 
		</div>
	</div>
</template>

<script>
	import xjb from './pinggu/xjb'
	import pingpai from './pinggu/pingpai'
	import jingguan from './pinggu/jingguan'
	import peitao from './pinggu/peitao'
	import fuwu from './pinggu/fuwu'
	import diduan from './pinggu/diduan'
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				houseCore: 73,
				tilteIco:['品牌实力','社区规划','社区配套','物业服务','地段配套'],
				starNum0: [],
				starNum1: [],
				starNum2: [],
				starNum3: [],
				starNum4: [],
				starNum5: [],
				pinPaiShiLi:{},
				sheQuJingGuan:{},
				sheQuPeiTao:{},
				wuYeFuWu:{},
				diDuanPeiTao:{},
				flag:false,
				flagShow:false,
				xingJiaBiCore:[]
			}
		},
		created:function(){
			
		},
		mounted: function() {
			let that = this;
			let id = this.$route.query.id;
			let type = this.$route.query.type;
			let cityId = this.$route.query.cityId;
			var data = {
					houseId:id,
					city:cityId,
					houseType:type
				}
			that.starNum0 = that.hasStar1(0);
			let ajaxURL=localStorage.getItem("ajaxURL");
			$.ajax({
				type:'get',
				url:`${ajaxURL}/houseweb/H5/allHouseScoreAndFiveScoresDetail.do`,
//				url:`http://192.168.0.162:8080/houseweb/H5/allHouseScoreAndFiveScoresDetail.do`,
				data:data,
				async:false,
				success:function(data){
					var res = JSON.parse(data)
					that.flagShow=true;
					console.log(res)
					if(res.status==1000){
						if(res.data.xingJiaBiCore.length!=0){
								
							if(that.$route.query.type=='new'){
								that.xingJiaBiCore=[
									res.data.xingJiaBiCore[0].pinPaiShiLi,
									res.data.xingJiaBiCore[0].sheQuGuiHuaYuJingGuan,
									res.data.xingJiaBiCore[0].sheQuPeiTao,
									res.data.xingJiaBiCore[0].wuYeFuWu,
									res.data.xingJiaBiCore[0].diDuanPeiTao
								];
								that.starNum1 = that.hasStar(res.data.xingJiaBiCore[0].pinPaiShiLi)
								that.starNum2 = that.hasStar(res.data.xingJiaBiCore[0].sheQuGuiHuaYuJingGuan)
								that.starNum3 = that.hasStar(res.data.xingJiaBiCore[0].sheQuPeiTao)
								that.starNum4 = that.hasStar(res.data.xingJiaBiCore[0].wuYeFuWu)
								that.starNum5 = that.hasStar(res.data.xingJiaBiCore[0].diDuanPeiTao)
							}else{
								that.xingJiaBiCore=[
									res.data.xingJiaBiCore[1].otherScores,
									res.data.xingJiaBiCore[2].otherScores,
									res.data.xingJiaBiCore[3].otherScores,
									res.data.xingJiaBiCore[4].otherScores,
									res.data.xingJiaBiCore[0].otherScores
								];
								that.starNum1 = that.hasStar(res.data.xingJiaBiCore[1].otherScores)
								that.starNum2 = that.hasStar(res.data.xingJiaBiCore[2].otherScores)
								that.starNum3 = that.hasStar(res.data.xingJiaBiCore[3].otherScores)
								that.starNum4 = that.hasStar(res.data.xingJiaBiCore[4].otherScores)
								that.starNum5 = that.hasStar(res.data.xingJiaBiCore[0].otherScores)
							}
						}else{
							that.starNum1 = 0
							that.starNum2 = 0
							that.starNum3 = 0
							that.starNum4 = 0
							that.starNum5 = 0
						}
						that.pinPaiShiLi=res.data.pinPaiShiLi;
						res.data.sheQuJingGuan.parkingRatio = parseFloat(res.data.sheQuJingGuan.parkingRatio).toFixed(2)
						that.sheQuJingGuan=res.data.sheQuJingGuan;
						that.sheQuPeiTao=res.data.sheQuPeiTao;
						that.wuYeFuWu=res.data.wuYeFuWu;
						that.diDuanPeiTao=res.data.diDuanPeiTao;
					}
					
				},
				error:function(){
//					console.log(3433333333333333)
				}
			})
			$('.lightEnd').show();
			$('.active .light').show();
			$('.active .lightEnd').hide();
			
			$('.plLeft ul').on('click', 'li', function() {
				$(this).addClass('active').siblings().removeClass('active')
				$(this).find('.star').addClass('light').siblings().find('.star').removeClass('light')
				$('.star').hide();
				$('.lightEnd').show();
				$('.active .light').show();
				$('.active .lightEnd').hide();
				$('.conRight').children().eq($(this).index()).addClass('show').siblings().removeClass('show');
			})
		},
		methods: {
			back() {
				this.$router.go(-1); //返回上一层
			},
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore / 20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str != 5) {
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) < 5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
			hasStar1: function() {
				let star = [];
				for(let i = 0; i < 5; i++) {
					star.push('static/images/prompt-star.png');
				}
				return star;
			}
		},
		components: {
			xjb,
			pingpai,
			jingguan,
			peitao,
			fuwu,
			diduan
		}
		
	}
</script>

<style scoped>
	.light {
		display: block;
	}
	.lightEnd {
		display: none;
	}
	.conRight>div {
		display: none;
	}
	
	.conRight .show {
		display: block;
	}
	
	.eud .mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
	    box-shadow: none;
	}
	
	.mui-bar-nav a {
		color: #fff;
	}
	
	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
	}
	
	.mui-bar .mui-title {
		line-height: 50px;
	}
	
	.eud {
		position: relative;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.plLeft {
		position: absolute;
		height: 100%;
		width: 125px;
		overflow: hidden;
		overflow-y: auto;
		background-color: #f8f8f8;
		padding-top: 50px;
	}
	
	.plLeft ul {
		margin: 0;
		padding: 0;
		padding-bottom: 50px;
		list-style: none;
	}
	
	.plLeft ul li {
		padding: 15px 0 15px 15px;
		border-bottom: 1px solid #c6c6c6;
	}
	
	.plLeft ul li.active {
		background-color: #fff;
	}
	
	.plLeft ul li.active .title {
		color: #0186C2;
	}
	
	.plLeft ul li.active .score {
		color: red;
	}
	
	.plLeft ul li .title {
		font-size: 15px;
		color: #999;
	}
	
	.star {
		display: none;
	} 
	.star img {
		width: 15px;
	}
	
	.conRight {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 125px;
		padding-left: 15px;
		padding-top: 50px;
		overflow: auto;
		padding-bottom: 50px;
	}
</style>